<template>
  <el-drawer :title="title" :visible.sync="open" direction="rtl" size="45%">
    <!-- :before-close="handleClose" -->
    <el-row>
      <el-col :span="3" :offset="1">
        <span class="titleText"> 方案列表 </span>
      </el-col>
      <el-col :span="5" v-if="addBtn">
        <el-input size="mini" v-model="fanganName" placeholder="请输入方案名称"></el-input>
      </el-col>
      <el-col :span="1.5">
        <el-button v-if="!addBtn" type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增方案</el-button>
        <el-button v-if="addBtn" type="danger" plain icon="el-icon-close" size="mini" @click="handleQxAdd">取消新增</el-button>
        <el-button v-if="addBtn" type="success" plain icon="el-icon-check" size="mini" @click="handleSubmit">确认新增</el-button>
      </el-col>
    </el-row>
    <el-table :data="bsFanganInfoList">
      <el-table-column label="方案名称" align="center" prop="fanganName" />
      <el-table-column label="试验室默认标识" align="center" prop="defaultFlag">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.default_flag" :value="scope.row.defaultFlag" />
        </template>
      </el-table-column>
      <el-table-column label="是否当前使用" align="center" prop="excelIdUseFlag">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.excelIdUseFlag">正在使用</el-tag>
          <el-tag type="info" v-else>未使用</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
      <el-table-column label="" align="center" prop="syTypeId" />
      <el-table-column label="" align="center" prop="label" />
      <el-table-column label="操作" align="center" class-name="small-paddin">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['sycs:bsFanganInfo:edit']">修改</el-button> -->
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <el-button size="mini" type="text" icon="el-icon-search" @click="handleLook(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="使用此方案" placement="top">
            <el-button size="mini" type="text" icon="el-icon-folder-checked" @click="handleSet(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="设为试验室默认" placement="top">
            <el-button size="mini" type="text" icon="el-icon-setting" @click="handleMoren(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-divider><i class="el-icon-more"></i></el-divider>
    <el-row>
      <el-col :offset="1" :span="3">
        <span class="titleText"> 字段详情 </span>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="50"> </el-table-column>
      <el-table-column align="center" prop="fieldLabel" label="字段名称">
        <template slot-scope="scope">
          <el-input disabled v-model="scope.row.fieldLabel" placeholder="请输入字段名称"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="fieldKey" label="字段Key值">
        <template slot-scope="scope">
          <el-input disabled v-model="scope.row.fieldKey" placeholder="请输入字段Key值"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="xsdws" label="保留几位小数">
        <template slot-scope="scope">
          <el-select v-model="scope.row.xsdws" placeholder="请选择保留几位小数">
            <el-option v-for="dict in dict.type.xsdws" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>
  <script>
import store from "@/store";
import Bus from "@/utils/bus";
import { addFanganUseInfo, updateFanganUseInfo } from "@/api/sycs/fanganUseInfo";
import { listBsFanganInfo, getBsFanganInfo, delBsFanganInfo, addBsFanganInfo, updateBsFanganInfo, setDefault, getYusheInfo } from "@/api/sycs/bsFanganInfo";
import { mapGetters } from "vuex";
export default {
  name: "SpecialCharacterView",
  dicts: ["default_flag", "sys_yes_no", "xsdws"],
  props: {
    activeValue: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      fanganName: "",
      addBtn: false,
      activeData: [],
      title: "选择小数点方案",
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        fanganId: [{ required: true, message: "方案id不能为空", trigger: "blur" }],
        deptId: [{ required: true, message: "所属试验室id不能为空", trigger: "blur" }],
        excelTypeId: [{ required: true, message: "excel类型id不能为空", trigger: "blur" }],
        fanganName: [{ required: true, message: "方案名称不能为空", trigger: "blur" }]
      },
      tableData: [],
      bsFanganInfoList: []
    };
  },
  created() {},
  mounted() {},
  // 监听顶部全局下拉
  computed: {
    ...mapGetters(["deptId"])
  },
  methods: {
    init(val) {
      this.activeData = val;
      this.getInfoList();
      this.open = true;
    },
    getInfoList() {
      listBsFanganInfo({
        pageNum: 1,
        pageSize: 100,
        deptId: this.deptId,
        excelId: this.activeData[0].excelId,
        excelTypeId: this.activeData[0].excelTypeId,
        sysYesNo: "N"
      })
        .then((res) => {
          this.bsFanganInfoList = res.rows;
        })
        .catch((err) => {
          console.error("出错了");
        });
    },
    // 填充符号
    setCharacter(value) {
      Bus.$emit("setCharacter", value);
      this.open = false;
    },
    handleAdd() {
      this.addBtn = true;
      getYusheInfo({
        excelTypeId: this.activeData[0].excelTypeId
      }).then((res) => {
        this.tableData = res.data || [];
      });
    },
    handleQxAdd() {
      this.tableData = [];
      this.addBtn = false;
      this.$message.warning("已取消新增！");
    },
    handleSubmit() {
      if (this.fanganName.length) {
        addBsFanganInfo({
          deptId: this.deptId,
          detailVos: this.tableData,
          excelTypeId: this.activeData[0].excelTypeId,
          fanganName: this.fanganName
        }).then((res) => {
          this.getInfoList();
          this.$message.success("新增方案成功！");
          this.addBtn = false;
          this.tableData = [];
        });
      } else {
        this.$message.warning("请填写您的方案名称！");
      }
    },
    handleLook(row) {
      this.tableData = [];
      const fanganId = row.fanganId;
      getBsFanganInfo(fanganId).then((response) => {
        this.tableData = response.data.detailVos;
      });
    },
    handleMoren(row) {
      const fanganIds = row.fanganId;
      this.$confirm(`是否确认把“${row.fanganName}”设为当前试验室默认吗？`)
        .then(() => {
          return setDefault(fanganIds);
        })
        .then(() => {
          this.getInfoList();
          this.$modal.msgSuccess("试验室默认方案设置成功");
        })
        .catch(() => {})
        .finally(() => {});
    },
    handleSet(row) {
      const fanganIds = row.fanganId;
      addFanganUseInfo({
        excelId: this.activeData[0].excelId,
        fanganId: row.fanganId
      }).then((res) => {
        this.getInfoList();
        // this.$emit("setXsd");
        Bus.$emit("setXsd", "");
        this.open = false;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    }
  }
};
</script>
  <style lang="scss" scoped>
.titleText {
  font-size: 18px;
  color: #000;
  font-weight: 600;
}
</style>
  